<template>
  <view>
    <view class="rocket-box">
      <image class="rocket" src="@/static/My/rocket.png"></image>
      <view>
        <text class="title">首页置顶尊享特权</text>
        <text class="description">首页黄金展示专区，受众率最大，相亲成功率暴增</text>
      </view>
    </view>

    <view class="btn">
      <TopButton
        v-for="(item, index) in buttons"
        :key="index"
        :title="item.title"
        :price="item.price"
        :icon="false"
        :isSelected="activeIndex === index"
        @update:selected="changeTab(index)"
      />
    </view>
    <view class="standard-container">
      <text class="standard-title">置顶显示标准</text>
      <view class="standard-list">
        <view class="list-item">
          <text class="dot">·</text>
          <text> 个人资料必须完整，如头像、生日、身高、昵称等，如果未填请立即完善 </text>
        </view>
        <view class="list-item">
          <text class="dot">·</text>
          <text>个人资料已通过审核</text>
        </view>
        <view class="list-item">
          <text class="dot">·</text>
          <text>个人资料状态非隐藏状态</text>
        </view>
      </view>
    </view>

    <view class="vip-footer">
      <button type="primary" class="top-button" @click="getTopItem">
        <image class="top-icon" src="@/static/My/top.png"> </image>
        立即置顶
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import TopButton from '@/pages/my/components/TopButton.vue'
import { getTopItemApi } from '@/services/mytop'
const activeIndex = ref(0)
const buttons = ref([
  { title: '购买置顶', price: '￥50' },
])
const u_id = uni.getStorageSync('userInfo').id || ''
console.log(u_id)

const money = ref(0)
const changeTab = (index: number) => {
  activeIndex.value = index
  if (index === 0) {
    money.value = 100
  } else {
    money.value = 50
  }
}

const getTopItem = async () => {
  if (u_id) {
    const res = await getTopItemApi(u_id)
    uni.showToast({
      title: '操作成功',
    })
    // 返回上一页
    uni.navigateBack()
  } else {
    uni.showToast({
      title: '请先登录',
      icon: 'error',
    })
  }
}
</script>

<style lang="scss" scoped>
body {
  background-color: rgb(245, 245, 245);
}

.rocket {
  width: 10vh;
  height: 10vh;
  padding-top: 3vh;
}

.rocket-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 2vh;
  margin-bottom: 2vh;
  text-align: center;

  text {
    margin-top: 2vh;
  }
}

.title {
  display: block;
  font-size: 2vh;
  font-weight: bold;
  margin-bottom: 1vh;
}

.description {
  display: block;
  font-size: 1.8vh;
  color: #999999;
}

.btn {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 1.5vh;
}

.standard-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90vw;
  margin: auto;
  padding: 4vh;
  border-radius: 8px;
  text-align: center;
  background-color: #fff;

  .standard-title {
    position: relative;
    padding: 2vh;
    font-size: 2.5vh;
    color: #333;
    font-weight: bold;
  }

  .standard-title::before,
  .standard-title::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 10vw;
    height: 1px;
    background-color: rgb(203, 199, 199);
    transform: translateY(-50%);
  }

  .standard-title::before {
    left: -15vw;
  }

  .standard-title::after {
    right: -15vw;
  }

  .standard-list {
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 2vw;
  }

  .list-item {
    width: 100%;
    color: rgb(141, 141, 141);
    display: flex;
    align-items: center;
    font-size: 2vh;
  }

  .dot {
    font-size: 4vw;
    margin-right: 0.5vw;
  }
}

.pen {
  width: 2vh;
  height: 2vh;
  margin-left: 1vh;
  font-size: 2vh;
  position: absolute;
  bottom: 0;
}

.run {
  margin-left: 3.5vh;
  color: black;
  font-size: 2vh;
}

.top-button {
  background-color: aqua;
  width: 45vh;
  text-align: center;
  margin: 0 auto;
  background-image: linear-gradient(to right, #6fc7d5, #28abc1);
  border-radius: 1.5em;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2vh;
}

.vip-footer {
  width: 100%;
  padding: 3%;
  box-sizing: border-box;
  margin-bottom: -2%;

  .top-button {
    width: 90%;
    background-image: linear-gradient(to right, #40ade3, #a2d7e8);
    border-radius: 1.5em;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5vw;

    .top-icon {
      width: 4vw;
      height: 4vw;
    }
  }
}
</style>
